@extends('wap.layouts.master')
@section('title','我的订单')

@section('content')

<div class="aw-main aw-user aw-user-order">
	<div class="aw-bg-fff aw-assest-tab" style="position:fixed;top:0px;left:0px;width:100%;z-index:9;">
		<ul class="aw-tab-list">
			<li class="aw-tab-li" :class="Class_Type(0)"><a href="javascript:;" v-on:click="Click_Type(0)">全部</a></li>
			<li class="aw-tab-li" :class="Class_Type(1)"><a href="javascript:;" v-on:click="Click_Type(1)">已订场</a></li>
			<li class="aw-tab-li" :class="Class_Type(2)"><a href="javascript:;" v-on:click="Click_Type(2)">已匹配</a></li>
			<li class="aw-tab-li" :class="Class_Type(3)"><a href="javascript:;" v-on:click="Click_Type(3)">已完成</a></li>
			<li class="aw-tab-li" :class="Class_Type(4)"><a href="javascript:;" v-on:click="Click_Type(4)">待评价</a></li>
		</ul>
	</div>
	<ul class="aw-order-list aw-mt50">
		<li class="aw-bg-fff aw-order-li" v-for="(list,key) in list_page">
			<div class="aw-order-li-top">
				<div class="aw-order-li-top-left aw-float-left">订单编号：@{{list.order_id}}</div>
				<div class="aw-order-li-top-right aw-float-right" v-html="Status_Text(list.status)"></div>
			</div>
			<div class="aw-order-li-body">
				<div class="aw-order-li-body-img"><img :src="list.address.img ? list.address.img : '/img/default_160_160.png'" onerror="javascript:this.src='/img/default_160_160.png';"></div>
				<div class="aw-order-li-body-des">
					<p>时段：@{{list.time}}</p>
					<p>场地：@{{list.address.storefront_name}} @{{list.address.type_text}} @{{list.address.number}}号</p>
				</div>
				<a :href="'tel:'+list.phone" class="aw-assest-btn aw-btn-bgcolor-lvse aw-order-li-body-des"><i class="aw-icon aw-icon-user-index aw-icon-user-tel"></i>联系我们</a>
			</div>
			<!--2已匹配&3已完成&4待评价&5已取消&6未匹配-->
			<ul class="aw-assest-list aw-assest-vs-match" v-if="list.status!=1">
				<li class="aw-bg-fff aw-list-li" v-if="list.status!=5&&list.order_type!=3">
					<div class="aw-li-desc aw-vs-desc">
						<div class="aw-vs-desc-zhandui aw-pr20">
							<span class="aw-desc-zhandui-img"><img :src="list.team_info.master.img ? list.team_info.master.img : '/img/default_160_160.png'" onerror="javascript:this.src='/img/default_160_160.png';"></span>
							<span class="aw-desc-zhandui-name">@{{list.team_info.master.name}}</span>
							<span class="aw-desc-zhandui-color">(@{{list.team_info.master.colour}})</span>
						</div>
						<div class="aw-vs-desc-zhandui aw-pl20" v-if="list.status==2||list.status==3||list.status==4">
							<span class="aw-desc-zhandui-img"><img :src="list.team_info.slave.img ? list.team_info.slave.img : '/img/default_160_160.png'" onerror="javascript:this.src='/img/default_160_160.png';"></span>
							<span class="aw-desc-zhandui-name">@{{list.team_info.slave.name}}</span>
							<span class="aw-desc-zhandui-color">(@{{list.team_info.slave.colour}})</span>
						</div>
						<div class="aw-vs-desc-zhandui aw-pl20" v-if="list.status==5||list.status==6">
							待定
						</div>
						<p class="aw-color-FF5450 aw-vs-desc-vs">VS</p>
					</div>
				</li>
			</ul>
			<div class="aw-order-li-foot">
				<div class="aw-order-li-foot-left">预定时间：@{{list.dateline}}</div>
				<div class="aw-order-li-foot-right" v-html="Status_Btn(list.status,list.order_id,key)"></div>
			</div>
		</li>
	</ul>
	<vue-loding :info_page="info_page"></vue-loding>
</div>

@section('pagejs')
@parent

<script type="text/javascript" src="/wap/js/vue-loding.js"></script>
<script type="text/javascript">
var MJS_URLArry=URLArry;
var Vue_Data={
	list_page:{},//获取订单列表
	info_page:{count:0,page:1,tips:'订单'},
	form:{page:1,type:0,page_num:10},//请求参数
};
//获取订单列表
var AD_list_page={
	api:'/api/order/order-list',
	form_data:Vue_Data.form,
	tips:false,
}
function Get_Refresh_Page_List(push){
	getData(AD_list_page,function(ajax_data){
		if(push==1){
			for(var i=0;i<ajax_data.list.length;i++){
				vm.list_page.push(ajax_data.list[i])
			}
			var info_page={count:ajax_data.count,page:ajax_data.page};
			$.extend(vm.info_page,info_page);
			return;
		}
		Vue_Data.list_page=ajax_data.list;
		var info_page={count:ajax_data.count,page:ajax_data.page,list_length:ajax_data.list.length};
		$.extend(Vue_Data.info_page,info_page);
	})
}
Get_Refresh_Page_List()
vm=new Vue({
	el:'#Vue-body',
	data:Vue_Data,
	components:{
		'vue-loding':V_Assest_loding,
	},methods:{
		Get_List_Data:function(push){
			//更新数据
			$.extend(AD_list_page.form_data,this.form);
			Get_Refresh_Page_List(push)
		},Click_Type:function(type){
			if(this.form.type==type){
				return;
			}
			this.form.type=type;
			this.form.page=1;
			$.extend(AD_list_page.form_data,this.form);
			Get_Refresh_Page_List()
			window.scrollTo(0,0);
		},Class_Type:function(type){
			if(type==this.form.type){
				return 'hover';
			}
		},Status_Text:function(status){
			if(status==1){
				return '<span class="aw-color-4FB5FD">已订场</span>'
			}else if(status==2){
				return '<span class="aw-color-1">已匹配 </span>'
			}else if(status==3){
				return '<span class="aw-color-999">已完成</span>'
			}else if(status==4){
				return '<span class="aw-color-FFA800">待评价</span>'
			}else if(status==5){
				return '<span class="aw-color-999">已取消</span>'
			}else if(status==6){
				return '<span class="aw-color-F44747">未匹配</span>'
			}
		},Status_Btn:function(status,order_id,key){
			if(status==1){
				//已订场
				return '<a href="javascript:;" data-order_id="'+order_id+'" data-key="'+key+'" class="Js-Cancel_Order aw-assest-btn aw-btn-radius aw-btn-bordercolor-lvse">取消订单</a>'
			}else if(status==2){
				//已匹配
				return '<a href="/wap/order/info-matching?order_id='+order_id+'" class="aw-assest-btn aw-btn-radius aw-btn-bordercolor-lvse">查看比赛信息</a>'
			}else if(status==3){
				//已完成
				return '<a href="/wap/order/info-complete?order_id='+order_id+'" class="aw-assest-btn aw-btn-radius aw-btn-bordercolor-lvse">查看比赛信息</a>'
			}else if(status==4){
				//待评价
				return '<a href="/wap/order/info-evaluate?order_id='+order_id+'" class="aw-assest-btn aw-btn-radius aw-btn-bordercolor-lvse">去评价</a>'
			}else if(status==5){
				//已取消
			}else if(status==6){
				//未匹配
				return '<a href="javascript:;" data-order_id="'+order_id+'" data-key="'+key+'" class="Js-Cancel_Order aw-assest-btn aw-btn-radius aw-btn-bordercolor-lvse">取消订单</a>'
			}
		},Cancel_Order:function(event){
			var order_id=event.attr('data-order_id')
			var key=event.attr('data-key')
			var AD_info_order={
				api:'/api/order/cancel',
				form_data:{order_id:order_id},
				tips:'取消订单成功',
				to_url:location.href,
			}
			postData(AD_info_order,function(){
				this.form.page=1;
				this.Get_List_Data()
				window.scrollTo(0,0);
			})
		}
	}
})
$(document).on('click','.Js-Cancel_Order',function(){
	vm.Cancel_Order($(this))
})
</script>
@endsection

@endsection

